<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="app">
        
        <v-dialog btn-text="Agree!">问题 1</v-dialog>
        <v-dialog btn-text="OK!">问题 2</v-dialog>

    </div>

    <template id="dialog-template">
        <div>
            <div class="Dialog" v-show="active">
                <div class="Dialog__overlay" @click="close()"></div>
                <div class="Dialog__content">
                    <div class="Dialog__body">
                        <slot></slot>
                    </div>
                    <div class="Dialog__footer">
                        <button class="btn" @click="onCancel()">取消</button>
                        <button class="btn btn-ok" @click="onConfirm()">{{ btnText }}</button>
                    </div>
                </div>
            </div>

            <a class="link" href="#" @click="open()">打开</a>
        </div>
    </template>

    <script src="js/vue.min.js"></script>
    <script>
        Vue.component('v-dialog', {
            template: '#dialog-template',
            data: function() {
                return {
                    active: false
                }
            },
            props: ['btnText'],
            methods: {
                open: function() {
                    this.active = true
                },
                close: function() {
                    this.active = false
                },
                onCancel: function() {
                    this.close();
                },
                onConfirm: function() {
                    this.close();
                }
            }
        })

        new Vue({
            el: "#app"
        })
    </script>
</body>
</html>


<style type="text/css">
	body {
	    margin: 0;
	    padding: 0;
	    font-family: 'Helvetica Neue', sans-serif;
	}
	
	#app {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    height: 100vh;
	}
	
	/* Dialog */
	.Dialog__overlay {
	    position: fixed;
	    z-index: 1;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    background: rgba(0, 0, 0, 0.6);
	}
	
	.Dialog__content {
	    position: fixed;
	    z-index: 13;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    background-color: white;
	    text-align: center;
	    border-radius: 2px;
	    width: 70%;
	    max-width: 250px;
	}
	
	.Dialog__body {
	    padding: 20px;
	    font-size: 15px;
	    color: #4a4a4a;
	    word-wrap: break-word;
	    word-break: break-all;
	    font-weight: 500;
	}
	
	.Dialog__footer {
	    position: relative;
	    line-height: 42px;
	    font-size: 15px;
	    display: flex;
	    flex-wrap: wrap;
	    white-space: nowrap;
	    width: 100%;
	    height: 40px;
	}
	
	.Dialog__footer:after {
	    content: " ";
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 1px;
	    border-top: 1px solid #D5D5D6;
	    color: #D5D5D6;
	    transform-origin: 0 0;
	    transform: scaleY(0.5);
	}
	
	.btn {
	    border-top-left-radius: 0;
	    border-bottom-left-radius: 0;
	    flex: 1;
	    border-left: 1px solid #D5D5D6 !important;
	    font-size: 1rem;
	    line-height: 30px;
	    display: inline-block;
	    height: 32px;
	    padding: 0 15px;
	    text-align: center;
	    text-decoration: none;
	    background-color: transparent;
	    color: #0179f1;
	    border-radius: 3px;
	    outline: 0;
	    vertical-align: middle;
	    transition: box-shadow .1s ease-out,background-color .1s ease-out, border-color .1s ease-out, color .1s ease-out;
	    border: none;
	    cursor: pointer;
	    position: relative;
	    display: block;
	    width: 100%;
	    height: 100%;
	}
	
	.btn-ok {
	    font-weight: 500;
	}
	
	.btn:active {
	    background-color: rgba(0, 0, 0, 0.05);
	}
	
	.btn:first-child {
	    border-bottom-left-radius: 2px;
	    border-left: none !important;
	}
	
	.link {
	    color: #08c;
	    font-size: 16px;
	    display: inline-block;
	    text-decoration: none;
	    border-bottom: 2px dotted;
	    margin-right: 5px;
	}
</style>


<script type="text/javascript">
	/*
		组件系统是vue的另一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用，因此，几乎任意类型的应用界面都可以看成一个组件树：
		组件的作用既可以从父作用域将数据传到子组件，也可以将把组件内部的数据发送到组件外部，可以实现互相传送数据.
		https://www.jianshu.com/p/ce97328a9085
		
		
	
	
	
	*/
</script>